<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>玉米商业信息管理</title>

    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="../css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">

    <link href="../css/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet">
    <link href="../css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <style>

        #page-wrapper
        {
            margin: 0 0 0 0px;
        }
        h1
        {
            font-size: 60px;
        }
    </style>
</head>

<body>

<div id="wrapper">

    <!-- 左侧导航栏 -->
    <!--<nav class="navbar-default navbar-static-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav metismenu" id="side-menu">
                &lt;!&ndash; 侧栏头部人物信息 &ndash;&gt;
                <li class="nav-header">
                    <div class="dropdown profile-element"> <span>
                            <img alt="image" class="img-circle" src="../img/profile_small.jpg" />
                             </span>
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">当前用户名</strong>
                             </span><span class="text-muted text-xs block">扩展栏 <b class="caret"></b></span> </span> </a>
                        &lt;!&ndash; 人物附加 &ndash;&gt;
                        <ul class="dropdown-menu animated fadeInRight m-t-xs">
                            <li><a href="staff/profile.html">Profile</a></li>
                            <li><a href="staff/staff_list.html">Contacts</a></li>
                            <li><a href="mailbox.html">Mailbox</a></li>
                            <li class="divider"></li>
                            <li><a href="login.html">退出登录</a></li>
                        </ul>
                    </div>
                    <div class="logo-element">
                        IN+
                    </div>
                </li>
                <li>
                    <a href="index.html"><i class="fa fa-user-circle-o" aria-hidden="true"></i> <span class="nav-label">员工管理</span><span
                            class="fa arrow"></span></a>

                    <ul class="nav nav-second-level collapse">
                        <li><a href="staff/staff_list.html">员工列表</a></li>
                        <li><a href="staff/staff_list.html">员工详情</a></li>
                        <li><a href="staff/staff_add.html">添加员工</a></li>
                    </ul>
                </li>
                <li>
                    <a href="layouts.html"><i class="fa fa-ship"></i> <span class="nav-label">商品管理</span></a>
                </li>

                <li style="padding-left: 2px">
                    <a href="#"> <i class="fa fa-user" aria-hidden="true"></i> <span class="nav-label">客户管理</span></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i> <span class="nav-label">订单管理 </span></a>&lt;!&ndash; 高亮提示 <span class="label label-warning pull-right">16/24</span> &ndash;&gt;</a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="mailbox.html">已发货</a></li>
                        <li><a href="mail_detail.html">无车</a></li>
                        <li><a href="mail_compose.html">退换货</a></li>
                        &lt;!&ndash;<li><a href="email_template.html">Email templates</a></li>&ndash;&gt;
                    </ul>
                </li>
                <li>
                    <a href="metrics.html"><i class="fa fa-truck" aria-hidden="true"></i> <span class="nav-label">物流信息</span> &lt;!&ndash; 绿色高辆，可用于更新 <span class="label label-primary pull-right">NEW</span> &ndash;&gt; </a>
                </li>
                <li>
                    <a href="widgets.html"><i class="fa fa-stack-exchange" aria-hidden="true"></i> <span class="nav-label">库存信息</span></a>
                </li>
                <li>
                    <a href="#"><i class="fa fa-money" aria-hidden="true"></i> <span class="nav-label">财务信息</span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level collapse">
                        <li><a href="income.html">收入</a></li>
                        <li>
                            <a href="pay.html">支出</a>
                        </li>
                        <li><a href="financial_statements.html">盈余报表</a></li>
                    </ul>
                </li>
                <li class="landing_link">
                    <a target="_blank" href="landing.html"><i class="fa fa-star"></i> <span class="nav-label">关于我们</span> &lt;!&ndash; <span class="label label-warning pull-right">NEW</span> &ndash;&gt;</a>
                </li>
            </ul>

        </div>
    </nav>-->

    <div id="page-wrapper" class="gray-bg dashbard-1">
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-10">
                <h2>仓库支出明细</h2>
                <ol class="breadcrumb">
                    <li>
                        <a href="index.html">首页</a>
                    </li>
                    <li>
                        <a>财务管理</a>
                    </li>
                    <li>
                        <a href="pay.html">支出管理</a>
                    </li>
                    <li class="active">
                        <strong>仓库支出明细</strong>
                    </li>
                </ol>
            </div>
        </div>
        <!-- 头部导航结束 -->

        <!-- 头部明细 -->
        <div class="col-md-4">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <span class="label label-info pull-right">五月</span>
                <h5>本月支出（元）</h5>
            </div>
            <div class="ibox-content">
                <h1 class="no-margins">￥90,800</h1>
                <div class="stat-percent font-bold text-info">20% <i class="fa fa-level-up"></i></div>
            </div>
        </div>
        </div>
        <div class="col-md-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-info pull-right">2017</span>
                    <h5>年度支出（元）</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">￥120,800</h1>
                    <div class="stat-percent font-bold text-info">10% <i class="fa fa-level-up"></i></div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>历史支出（三个月内）</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <table class="table table-hover no-margins">
                        <thead>
                        <tr>
                           <td>月份</td>
                           <td>金额（元）</td>
                           <td>经手人</td>
                           <td></td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>三月</td>
                            <td>￥5000.00</td>
                            <td>admin</td>
                            <td></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- 头部明细结束 -->

        <div class="row">
            <div class="col-lg-12">
                <div class="tabs-container">
                    <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="#tab-1">图形</a></li>
                        <li class=""><a data-toggle="tab" href="#tab-2"> 列表</a></li>
                    </ul>
                    <div class="tab-content">
                        <!-- 图形展示 -->
                        <div id="tab-1" class="tab-pane active">
                            <div class="col-lg-6">
                                <div class="ibox float-e-margins">
                                    <div class="ibox-title">
                                        <h5>支出占比</h5>
                                        <div ibox-tools></div>
                                    </div>
                                    <div class="ibox-content">
                                        <div>
                                            <canvas id="doughnutChart" height="140"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 列表展示 -->
                        <div id="tab-2" class="tab-pane ">
                            <div class="panel-body">
                                <!-- 支出额列表 -->
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="ibox float-e-margins">
                                            <div class="ibox-title">
                                                <h5>支出单 </h5>
                                                <div class="ibox-tools">
                                                    <a class="collapse-link">
                                                        <i class="fa fa-chevron-up"></i>
                                                    </a>
                                                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                                        <i class="fa fa-wrench"></i>
                                                    </a>
                                                    <ul class="dropdown-menu dropdown-user">
                                                        <li><a href="#">Config option 1</a>
                                                        </li>
                                                        <li><a href="#">Config option 2</a>
                                                        </li>
                                                    </ul>
                                                    <a class="close-link">
                                                        <i class="fa fa-times"></i>
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="ibox-content">
                                                <div class="row">
                                                    <div class="col-sm-2 m-b-xs"><select class="input-sm form-control input-s-sm inline">
                                                        <option value="0">1号仓库</option>
                                                        <option value="1">2号仓库</option>
                                                        <option value="2">3号仓库</option>
                                                        <option value="3">4号仓库</option>
                                                    </select>
                                                    </div>
                                                    <div class="col-sm-4 m-b-xs">
                                                        <div data-toggle="buttons" class="btn-group">
                                                            <label class="btn btn-sm btn-white"> <input type="radio" id="option1" name="options"> 日 </label>
                                                            <label class="btn btn-sm btn-white active"> <input type="radio" id="option2" name="options"> 周 </label>
                                                            <label class="btn btn-sm btn-white"> <input type="radio" id="option3" name="options"> 月 </label>
                                                        </div>
                                                    </div>

                                                    <div class="col-sm-2 m-b-xs">
                                                        <div class="form-group" id="startDate">

                                                            <div class="input-group date">
                                                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span><input type="text" class="form-control" value="03/04/2017">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-sm-2 m-b-xs">
                                                        <div class="form-group" id="endDate">

                                                            <div class="input-group date">
                                                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span><input type="text" class="form-control" value="03/04/2017">
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="col-sm-2">
                                                        <div class="input-group"><input type="text" placeholder="Search" class="input-sm form-control"> <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-primary"> 搜索</button> </span></div>
                                                    </div>
                                                </div>
                                                <div class="table-responsive">
                                                    <table class="table table-striped">
                                                        <thead>
                                                        <tr>
                                                            <th></th>
                                                            <th>单据编号 </th>
                                                            <th>单据日期</th>
                                                            <th>经手人</th>
                                                            <th>支出金额（元） </th>
                                                            <th>状态</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        <tr>
                                                            <td>1</td>
                                                            <td>Project<small>This is example of project</small></td>
                                                            <td><span class="pie">0.52/1.561</span></td>
                                                            <td>20%</td>
                                                            <td>Jul 14, 2013</td>
                                                            <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
                                                        </tr>
                                                        <tr>
                                                            <td>2</td>
                                                            <td>Alpha project</td>
                                                            <td><span class="pie">6,9</span></td>
                                                            <td>40%</td>
                                                            <td>Jul 16, 2013</td>
                                                            <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
                                                        </tr>
                                                        <tr>
                                                            <td>3</td>
                                                            <td>Betha project</td>
                                                            <td><span class="pie">3,1</span></td>
                                                            <td>75%</td>
                                                            <td>Jul 18, 2013</td>
                                                            <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
                                                        </tr>
                                                        <tr>
                                                            <td>4</td>
                                                            <td>Gamma project</td>
                                                            <td><span class="pie">4,9</span></td>
                                                            <td>18%</td>
                                                            <td>Jul 22, 2013</td>
                                                            <td><a href="#"><i class="fa fa-check text-navy"></i></a></td>
                                                        </tr>
                                                        <tr>
                                                            <td></td>
                                                            <td></td>
                                                            <td></td>
                                                            <td></td>
                                                            <td>总计：50000</td>
                                                        </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>



<!-- Mainly scripts -->
<script src="../js/jquery-2.1.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="../js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

<!-- Peity -->
<script src="../js/plugins/peity/jquery.peity.min.js"></script>
<script src="../js/plugins/chartJs/Chart.min.js"></script>
<!--<script src="../js/demo/chartjs-demo.js"></script>-->

<!-- Custom and plugin javascript -->
<script src="../js/inspinia.js"></script>
<script src="../js/plugins/pace/pace.min.js"></script>

<!-- iCheck -->
<script src="../js/plugins/iCheck/icheck.min.js"></script>


<!-- 日期插件 -->
<script src="../js/plugins/datapicker/bootstrap-datepicker.js"></script>

<script>
    $(document).ready(function(){
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
    });

    var doughnutData = [
        {
            value: 300,
            color: "#a3e1d4",
            highlight: "#1ab394",
            label: "App"
        },
        {
            value: 50,
            color: "#dedede",
            highlight: "#1ab394",
            label: "Software"
        },
        {
            value: 100,
            color: "#b5b8cf",
            highlight: "#1ab394",
            label: "Laptop"
        }
    ];
    var doughnutOptions = {
        segmentShowStroke: true,
        segmentStrokeColor: "#fff",
        segmentStrokeWidth: 2,
        percentageInnerCutout: 45, // This is 0 for Pie charts
        animationSteps: 100,
        animationEasing: "easeOutBounce",
        animateRotate: true,
        animateScale: false,
        responsive: true,
    };
    var ctx = document.getElementById("doughnutChart").getContext("2d");
    var myNewChart = new Chart(ctx).Doughnut(doughnutData, doughnutOptions);
</script>

</body>

</html>